<template>
    <el-dialog :visible="visible"
               title="Vendor"
               :show-close="false"
               width="80%"
               top="0px"
    >
        <div class="search">
            <el-input v-model="key" placeholder="Search">
            </el-input>
        </div>
        <el-table
                :data="vendorList"
                border
                stripe
                style="width: 100%">
            <el-table-column
                   type="index"
                    label="No"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="Vendor Name"
                    width="320">
                <template slot-scope="scope">
                    <el-popover
                            placement="top-start"
                            title="Vendor Information"
                            width="600"
                            trigger="hover"
                            >
                             <el-form :inline="true" label-width="200">
                                 <el-form-item label="Address">
                                     <span class="desc">{{scope.row.address}}</span>
                                 </el-form-item>
                                 <el-form-item label="Contact Person">
                                     <span class="desc">{{scope.row.contact}}</span>
                                 </el-form-item>
                                 <el-form-item label="Phone Number">
                                     <span class="desc">{{scope.row.phone}}</span>
                                 </el-form-item>
                                 <el-form-item label="Note">
                                     <span class="desc">{{scope.row.note}}</span>
                                 </el-form-item>
                             </el-form>
                        <span slot="reference">{{scope.row.englishName}}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="settlementType"
                    label="Business"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="City"
                    width="150">
            </el-table-column>

            <el-table-column label="operate" >
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="select(scope.row)">Select</el-button>
                </template>
            </el-table-column>
        </el-table>

        <span slot="footer" class="dialog-footer">
                        <el-button @click="emit('close')">Cancel</el-button>
                        <el-button type="primary" @click="emit('add')">Add</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {ERROR_OK} from "../../util/config";
    import {getVendorList} from "../../api/jianzhan";

    export default {
        name: "spare-part-item",
        data(){
            return {
                vendorList:[],
                key:''
            }
        },
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        created(){
            this._getVendorList()
        },
        methods:{
            async _getVendorList(){
                let {status,data} = await getVendorList();
                if (status === ERROR_OK) {
                    this.vendorList = data
                }
            },
            select(row){
                this.$emit('select',row)
            },
            emit(key){
                if(key==='close') {
                    this.$emit(key,false)
                } else {
                    const list = [...this.partList];
                    const lists = list.filter(item=>item.checked === true);
                    this.$emit(key,lists)
                }

            }
        }
    }
</script>

<style scoped>
    .desc{
        width: 200px;
        display: inline-block;
        color: #999;
    }
</style>